<template>
  <div class="room-main">
    <div class="rooms-item">
      <div class="rooms-left">
        <el-image
            style="width: 310px; height: 155px"
            :src="getImages[0]"
            :preview-src-list="getImages">
        </el-image>
<!--        <img :src="getImages" alt="">-->
        <h2>{{roomsItem.roomType}}</h2>
        <el-radio v-model="roomIndex" v-for="(item,index) in roomsItem.roomBed?roomsItem.roomBed.split('|'):[]"
                  :key="index" :label="index">{{item}}</el-radio>
        <h5 :style="roomsItem.roomRemain.split('|')[roomIndex]<2?'color:red':'display:none'">房间仅剩：{{roomsItem.roomRemain.split('|')[roomIndex]}}间</h5>
      </div>
      <div class="rooms-center">
        <el-card >
          <div slot="header" class="clearfix">
            <span>客房信息</span>
          </div>
          <div>房间面积：{{roomsItem.roomSize}}平方米</div>
          <div>楼层：{{roomsItem.roomFloor}}楼</div>
          <el-divider content-position="left"><i class="el-icon-s-flag"></i></el-divider>
          <el-divider></el-divider>
          <div>{{this.roomsItem.roomDesc}}</div>
        </el-card>
      </div>

      <div class="rooms-right">
        <span>{{getRoomPrice[roomIndex]}}元</span>
        <el-button type="primary" @click="preOrder">立即预定</el-button>
      </div>
    </div>
    <el-divider content-position="right"><span>子昂酒店</span></el-divider>
  </div>
</template>

<script>
import {SET_SHOW_LOGIN} from "@/store/mutations-type";

export default {
  name: "RoomListItem",
  data(){
    return{
      roomIndex:0,
    }
  },
  props:{
    roomsItem:[],
  },
  computed:{//计算属性
    getImages(){//图片
      return this.roomsItem.roomImages?this.roomsItem.roomImages.split("|"):[]
    },
    getRoomPrice(){
      return  this.roomsItem.roomPrice.split('|');
    },
  },
  methods:{
    //预订房价
    preOrder(){
      if (this.$store.getters.getLoinStatue){
        if (this.roomIndex === null){
          this.$message.warning('请选择房间类型')
          return
        }
        this.$router.push({
          path:'/order',
          query:{
            id:this.roomsItem.roomTypeIds.split('|')[this.roomIndex],
            typeNo:this.roomsItem.roomTypeNo
          }
        })
      }else {//登录
        this.$store.commit(SET_SHOW_LOGIN,true)
      }
    }
  }
}
</script>

<style scoped>
  .rooms-item {
    position: relative;
    box-shadow: 0 10px 10px 0 skyblue;
    height: 300px;
  }
  .rooms-left {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 350px;
    height: 200px;
  }
  .rooms-left h2{
    display: inline-block;
    width: 310px;
    text-align: center;
    color: #00a4ff;
    cursor: pointer;
    font-weight: 700;
    font-family: SimSun,Microsoft YaHei,serif;
  }
  .rooms-center {
    position: absolute;
    left: 350px;
    width: 400px;
    cursor: pointer;
  }
  .rooms-right {
    position: absolute;
    text-align: center;
    right: 30px;
    top: 100px;
  }
  .rooms-right span {
    display: inline-block;
    margin: 30px;
    font-size: 20px;
    font-weight: 700;
  }
</style>